<template>
    <div>
      <Home />

      <button @click="click"> app+1</button>
      {{name}} {{counter}}
    </div>
</template>

<script>
import Home from './home.vue'
import { ref, provide, readonly } from 'vue'
export default {
  components: {
    Home
  },
  setup() {
    const name = ref('张三')
    let counter = ref(0)
    // 使用readOnly限制子组件修改值
    provide('name', readonly(name))
    provide('counter', readonly(counter))
    const click = () => {
      counter.value++
    }
    return {
      counter,
      name,
      click
    }
  }
}
</script>

<style>

</style>